<template>
	<view class="tab_bar">
		<!-- 滚动区域 -->
		<scroll-view scroll-x="true" class="tab_scroll" >
			<view class="tab_scroll_box">
				<view @click="changeActiveTabBar(index)" :class="{ active: currentTabBarIndex === index }" class="tab_scroll_item" v-for="(item, index) in tabBarList" :key="index">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
		<view class="tab_icon">
			<uni-icons @click="goLabelAdmin" type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props: {
			tabBarList: {
				type: Array,
				default: () => []
			},
			currentTabBarIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
			};
		},
		methods: {
			goLabelAdmin() {
				uni.navigateTo({
					url: '/pages/labelAdmin/labelAdmin'
				})
			},
			changeActiveTabBar(index) {
				this.$emit('changeTabBarIndex', index)
			}
		}
	}
</script>

<style scoped lang="scss">
@import 'css/TabBar.scss'
</style>